<template>
  <div class="basic-info-container">
    <!-- 头部 -->
    <div class="basic-info-header">
      <div class="basic-info-box">
        <div class="info-item-box">
          <span class="info-val">{{projectDetail.product_line_count}}</span>
          <span>产线数量</span>
        </div>
        <div class="info-item-box">
          <span class="info-val">{{projectDetail.device_count}}</span>
          <span>设备数量</span>
        </div>
        <div class="info-item-box">
          <span class="info-val">{{projectDetail.project_status}}</span>
          <span>项目状态</span>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-wrap">
      <div class="content-item-box">
        <span>项目名称</span>
        <span class="content-item-val">{{projectDetail.project_name}}</span>
      </div>
      <div class="content-item-box">
        <span>合同编号</span>
        <span class="content-item-val">{{projectDetail.contract}}</span>
      </div>
      <div class="content-item-box">
        <span>工程编号</span>
        <span class="content-item-val">{{projectDetail.engineering}}</span>
      </div>
      <div class="content-item-box">
        <span>客户名称</span>
        <span class="content-item-val">{{projectDetail.customer_name}}</span>
      </div>
      <div class="content-item-box">
        <span>项目经理</span>
        <span class="content-item-val">{{projectDetail.project_manager_name}}</span>
      </div>
      <div class="content-item-box">
        <span>安装负责人</span>
        <span class="content-item-val install-user-val">{{projectDetail.install_user_name}}</span>
      </div>
      <div class="content-item-box">
        <span class="debug-user-key">调试人员</span>
        <span
          v-if="projectDetail.debug_user_name"
          class="debug-user-val"
        >{{projectDetail.debug_user_name}}</span>
      </div>
      <div class="content-item-box">
        <span>客户姓名</span>
        <span class="content-item-val">{{projectDetail.customer_user_name}}</span>
      </div>
      <div class="content-item-box">
        <span>联系电话</span>
        <span class="content-item-val">{{projectDetail.customer_phone}}</span>
      </div>
      <div class="content-item-box">
        <span>创建时间</span>
        <span class="content-item-val">{{projectDetail.created_at}}</span>
      </div>
      <div class="content-item-box">
        <span>发货时间</span>
        <span class="content-item-val">{{projectDetail.send_time2}}</span>
      </div>
      <div class="content-item-box">
        <span>调试时间</span>
        <span class="content-item-val">{{projectDetail.debug_time2}}</span>
      </div>
      <div class="content-item-box">
        <span>验收时间</span>
        <span class="content-item-val">{{projectDetail.acceptance_time2}}</span>
      </div>
      <div class="content-item-box">
        <span>质保时间</span>
        <span class="content-item-val">{{projectDetail.warranty_time2}}</span>
      </div>
      <div class="content-item-box">
        <span>项目地址</span>
        <span class="content-item-val">{{ projectDetail.continents }} {{ projectDetail.countries }} {{ projectDetail.provinces }} {{ projectDetail.city }} {{ projectDetail.address }}</span>
      </div>
      <div class="content-item-box project-describe-box">
        <span>项目描述</span>
        <span class="content-item-val describe-val">{{ projectDetail.describe }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectDetail } from '@/api/projectManage';

export default {
  name: 'BasicInfo',
  props: {
    projectId: Number // 项目id
  },
  data() {
    return {
      projectDetail: {} // 项目详情
    };
  },
  created() {
    this.getProjectDetailEvent();
  },
  methods: {
    // 获取项目详情
    getProjectDetailEvent() {
      const params = {
        project_id: this.projectId // 项目id
      };
      getProjectDetail(params).then(res => {
        const resData = res.data;
        resData.send_time2 = this.formatDate(resData.send_time);
        resData.debug_time2 = this.formatDate(resData.debug_time);
        resData.acceptance_time2 = this.formatDate(resData.acceptance_time);
        resData.warranty_time2 = this.formatDate(resData.warranty_time);

        // 发货时间
        resData.send_time = resData.send_time * 1000;
        let sendTime = resData.send_time;
        // 调试时间
        resData.debug_time = resData.debug_time * 1000;
        let debugTime = resData.debug_time;
        // 验收时间
        resData.acceptance_time = resData.acceptance_time * 1000;
        let acceptanceTime = resData.acceptance_time;
        // 质保时间
        resData.warranty_time = resData.warranty_time * 1000;
        let warrantyTime = resData.warranty_time;
        // 判断 质保时间、验收时间、调试时间、发货时间
        // 当前时间
        let currentDateTime = new Date().getTime();
        // 已过保
        if (warrantyTime < currentDateTime) {
          resData.project_status = '已过保';
        } else {
          // 未过保
          // 有验收时间
          if (resData.acceptance_time) {
            // 已验收
            // 超过验收时间
            if (acceptanceTime < currentDateTime) {
              resData.project_status = '已验收';
            } else {
              // 未超过验收时间
              // 有调试时间
              if (resData.debug_time) {
                // 超过调试时间
                if (debugTime < currentDateTime) {
                  resData.project_status = '已交付';
                } else {
                  // 未超过调试时间
                  // 有发货时间
                  if (resData.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      resData.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      resData.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    resData.project_status = '未知';
                  }
                }
              } else {
                // 无调试时间
                // 有发货时间
                if (resData.send_time) {
                  // 超过发货时间
                  if (sendTime < currentDateTime) {
                    resData.project_status = '试运行';
                  } else {
                    // 未超过发货时间
                    resData.project_status = '未知';
                  }
                } else {
                  // 无发货时间
                  resData.project_status = '未知';
                }
              }
            }
          } else {
            // 无验收时间
            // 有调试时间
            if (resData.debug_time) {
              // 超过调试时间
              if (debugTime < currentDateTime) {
                resData.project_status = '已交付';
              } else {
                // 未超过调试时间
                // 有发货时间
                if (resData.send_time) {
                  // 超过发货时间
                  if (sendTime < currentDateTime) {
                    resData.project_status = '试运行';
                  } else {
                    // 未超过发货时间
                    resData.project_status = '未知';
                  }
                } else {
                  // 无发货时间
                  resData.project_status = '未知';
                }
              }
            } else {
              // 无调试时间
              // 有发货时间
              if (resData.send_time) {
                // 超过发货时间
                if (sendTime < currentDateTime) {
                  resData.project_status = '试运行';
                } else {
                  // 未超过发货时间
                  resData.project_status = '未知';
                }
              } else {
                // 无发货时间
                resData.project_status = '未知';
              }
            }
          }
        }

        // 处理调试人员
        if (resData.debug_user_name) resData.debug_user_name = Object.values(resData.debug_user_name).join('、');
        this.projectDetail = resData;
      });
    },
    // 格式化日期
    formatDate(now) {
      let dt = new Date(now * 1000);
      let year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let date = dt.getDate();
      date = date < 10 ? '0' + date : date;
      return `${year}-${month}-${date}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.basic-info-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  // 头部
  .basic-info-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.506667rem;
    background-color: #ffffff;
    font-size: 0.32rem;
    .basic-info-box {
      display: flex;
      align-items: center;
      width: 9.146667rem;
      height: 1.866667rem;
      background-color: #21a2ff;
      border-radius: 0.133333rem;
      .info-item-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ffffff;
        .info-val {
          margin-bottom: 0.266667rem;
          font-size: 0.426667rem;
        }
      }
    }
  }

  // 内容区域
  .content-wrap {
    background-color: #ffffff;
    padding: 0 0.48rem;
    font-size: 0.373333rem;
    .content-item-box {
      display: flex;
      align-items: center;
      // height: 1.226667rem;
      padding: 0.32rem 0;
      border-bottom: 1px solid #f2f6fc;
      .content-item-val {
        margin-left: 0.8rem;
      }
      // 安装负责人的样式
      .install-user-val {
        margin-left: 0.4rem;
      }
      // 调试人员的样式
      .debug-user-key {
        margin-right: 0.8rem;
      }
      .debug-user-val {
        width: 6.666667rem;
        line-height: 0.533333rem;
      }
    }
    // 项目描述
    .project-describe-box {
      align-items: flex-start;
      line-height: 0.533333rem;
      .describe-val {
        width: 6.666667rem;
      }
    }
  }
}
</style>